<template>
    <div class="wrapper">
            <div class="content">
                <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view></router-view>
                    </keep-alive>
                </transition>
                <el-backtop target=".content"></el-backtop>
            </div>

		<div class="centerTipBox" v-if="frame==true">
			<div class="centerTip">
				<div class="title">提示</div>
				<div class="text">有<span style="color: red;">{{num}}</span>个报单快到期了！</div>
				<div class="btn" @click="cancel">确定</div>
			</div>
		</div>
    </div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
export default {
    data() {
        return {
            tagsList: [],
            collapse: false,
			num:0,
			frame:false
        };
    },
    components: {
        vHead,
        vSidebar,
        vTags
    },
    created() {
        bus.$on('collapse-content', msg => {
            this.collapse = msg;
        });
		this.num=this.$store.state.num
		this.frame=this.$store.state.frame
		console.log('测试全局变量',this.$store.state.frame)
        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on('tags', msg => {
            let arr = [];
            for (let i = 0, len = msg.length; i < len; i++) {
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        });
    },
	methods:{
		cancel(){
			this.frame=false
		},
	}
};
</script>
<style scoped>
	.centerTipBox{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.5);
		z-index: 1000;
	}
	.centerTipBox .centerTip{
		width: 380px;
		height: 200px;
		background: white;
		position: absolute;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		border-radius: 20px;
	}
	.centerTipBox .centerTip .title{
		width: 100%;
		height: 30px;
		margin-top: 20px;
		text-align: center;
		font-weight: bold;
		font-size: 22px;
	}
	.centerTipBox .centerTip .text{
		text-align: center;
		font-size: 18px;
		margin-top: 30px;
	}
	.centerTipBox .centerTip .btn{
		width: 140px;
		height: 36px;
		line-height: 36px;
		background-color: #006FBC;
		color: white;
		text-align: center;
		border-radius: 10px;
		margin: auto;
		margin-top: 30px;
	}
</style>
